<template>
  <div>
      <el-button type="primary" icon="el-icon-refresh" @click="get_admin_accountlist">刷新</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="add_account">增加</el-button>
      <el-table :data="adminaccountlist" align="center">
          <el-table-column prop="username" label="用户名" width="120"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="sbu_id" label="事业部" width="120" :formatter="sbuIdFormat"></el-table-column>
          <el-table-column prop="userrole" label="用户角色" width="120" :formatter="userroleIdFormat"></el-table-column>
          <el-table-column prop="up_admin" label="审核人" width="120"></el-table-column>
          <el-table-column prop="enbale" label="是否启用" width="120"></el-table-column>
          <el-table-column prop="adminrole" label="管理角色" width="120"></el-table-column>
          <el-table-column prop="password" label="密码" width="120"></el-table-column>
          <el-table-column prop="department" label="部门" width="120"></el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
      </el-table>
      <el-dialog title="新增账户" :visible.sync="addFormVisible" :close-on-click-modal="false">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-width="100px">
          <el-form-item label="账户名称" prop="username">
            <el-input v-model="addForm.username"></el-input>
          </el-form-item>
          <el-form-item label="使用人姓名" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="事业部编号" prop="sbu_id">
            <el-select v-model="addForm.sbu_id" placeholder="请选择管理事业部">
              <template v-for="item in sbuIds">
                <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="用户角色" prop="userrole">
            <el-select v-model="addForm.userrole" placeholder="请选择用户角色">
              <template v-for="item in userRoles">
                <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="审核人" prop="up_admin">
            <el-input v-model="addForm.up_admin"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="enbale">
            <el-input v-model="addForm.enbale"></el-input>
          </el-form-item>
          <el-form-item label="管理角色" prop="adminrole">
            <el-input v-model="addForm.adminrole"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="addForm.password"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-input type="department" v-model="addForm.department"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addFormVisible = false">取消</el-button>
            <el-button type="primary" @click="addSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="编辑账户" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form ref="editForm" :model="editForm" :rules="addFormRules" label-width="100px">
          <el-form-item label="账户名称" prop="username" disabled="true">
            <div>{{editForm.username}}</div>
          </el-form-item>
          <el-form-item label="使用人姓名" prop="name">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="事业部编号" prop="sbu_id">
            <el-select v-model="editForm.sbu_id" placeholder="请选择管理事业部">
              <template v-for="item in sbuIds">
                <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="用户角色" prop="userrole">
            <el-select v-model="editForm.userrole" placeholder="请选择用户角色">
              <template v-for="item in userRoles">
                <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="审核人" prop="up_admin">
            <el-input v-model="editForm.up_admin"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="enbale">
            <el-input v-model="editForm.enbale"></el-input>
          </el-form-item>
          <el-form-item label="管理角色" prop="adminrole">
            <el-input v-model="editForm.adminrole"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="editForm.password"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-input type="department" v-model="editForm.department"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click="editSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      adminaccountlist: [],
      addFormVisible: false,
      editFormVisible: false,
      addForm: {
        username: "",
        name: "",
        sbu_id: "",
        userrole: "",
        up_admin: "",
        enbale: 0,
        adminrole: "",
        password: "",
        department: ""
      },
      editForm: {
        username: "",
        name: "",
        sbu_id: "",
        userrole: "",
        up_admin: "",
        enbale: 0,
        adminrole: "",
        password: "",
        department: ""
      },
      sbuIds: [],
      userRoles: [],
      addFormRules: {
        username: [{ required: true, message: "请输入账户名", triger: "blur" }],
        name: [{ required: true, message: "请输入管理员姓名", triger: "blur" }],
        sbu_id: [
          { required: true, message: "请输入事业部编号", triger: "blur" }
        ],
        userrole: [
          { required: true, message: "请输入用户角色编号", triger: "blur" }
        ],
        up_admin: [
          { required: true, message: "请输入审核人账户", triger: "blur" }
        ],
        enbale: [{ required: true, message: "请输入是否启用", triger: "blur" }],
        adminrole: [
          { required: true, message: "请输入管理角色", triger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", triger: "blur" }],
        department: [{ required: true, message: "请填写部门", triger: "blur" }]
      }
    };
  },
  created() {
    this.getIdValues();
    this.get_admin_accountlist();
  },
  methods: {
    get_admin_accountlist() {
      this.axios
        .get("/show_admin_account")
        .then(response => {
          this.adminaccountlist = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    add_account() {
      this.addFormVisible = true;
    },
    editClick(row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    addSubmit() {
      this.axios
        .post("/add_admin_account", JSON.stringify(this.addForm))
        .then(response => {
          if (response.data.success === 1) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
          } else {
            this.$message({
              message: "账户添加失败",
              type: "warning"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    editSubmit() {
      this.axios
        .post("/edit_admin_account", JSON.stringify(this.editForm))
        .then(response => {
          if (response.data.success === 1) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
          } else {
            this.$message({
              message: "账户添加失败",
              type: "warning"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getIdValues() {
      this.axios
        .get("/get_id_values")
        .then(response => {
          this.sbuIds = response.data.sbuid;
          this.userRoles = response.data.userrole;
        })
        .catch(error => {
          console.log(error);
        });
    },
    sbuIdFormat(row) {
      return this.sbuIds.find(element => element.id == row.sbu_id).name;
    },
    userroleIdFormat(row) {
      return this.userRoles.find(element => element.id == row.userrole).name;
    }
  }
};
</script>
